<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>考试管理</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/attend/m/common.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background-color: white;padding: 5px;">
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">考试管理</li>

    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-card" style="width: 80%;margin: auto">
                <table id="Settlement" lay-filter="SettlementFilter"></table>
            </div>
        </div>

    </div>
</div>

<script type="text/html" id="toolbars">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" style="width: 70px">新增</button>
    </div>
</script>
<script type="text/html" id="barOperation">
    <a class="layui-btn layui-btn-xs" lay-event="fabu" id="fabu">发布</a>
    <%--<a class="layui-btn layui-btn-xs" lay-event="courseCon" id="courseCon">课程内容</a>--%>
    <%--<a class="layui-btn layui-btn-xs" lay-event="edit" id="edit1">编辑</a>--%>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
    var first;
    var sencond;
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'form'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , form = layui.form
        //执行一个 table 实例
        var tableObj = table.render({
            elem: '#Settlement'
            , url: '/course/showExam' //数据接口
            , title: '考试链接表'
            , defaultToolbar: ['filter', {
                title: '提示' //标题
                , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-tips' //图标类名
            }]
            , toolbar: '#toolbars'
            , page: true
            , cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left', hide: true}
                , {field: 'examName', title: '课程内容',}
                , {field: 'examArrangement', title: '考试安排'}
                , {
                    field: 'type', title: '考试类型', templet: function (d) {
                        if (d.type == 0) {
                            return '线上'
                        } else {
                            return '线下'
                        }
                    }
                }
                , {field: 'examUserName', title: '参考人员'}
                , {
                    field: 'examState', title: '状态', templet: function (d) {
                        if (d.examState == 0) {
                            return '未发布'
                        } else {
                            return '已发布'
                        }
                    }
                }
                , {field: 'examTime', title: '考试时间', width: 150}
                , {field: 'endTime', title: '考试结束时间', width: 150}
                , {field: 'space', title: '考试地点'}
                , {fixed: 'right', width: 200, title: '操作', align: 'center', toolbar: '#barOperation'}

            ]],
            done: function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    if (res.data[i].examState == '0') {
                        $('tr[data-index="' + i + '"]').find('#fabu').text('发布')
                    } else {
                        $('tr[data-index="' + i + '"]').find('#fabu').text('取消发布')

                    }
                }
            }
        });
        table.on('toolbar(SettlementFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    editAdd(0, 0);
                    break;
            }
            ;
        });
        table.on('tool(SettlementFilter)', function (obj) {//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var courseId = data.id;
            var courseType = data.courseType
            var urlTitle = '/course';
            if (layEvent === 'del') { //删除
                // layer.confirm('确认删除', function(index){
                publicDeletes(urlTitle + "/deleteExam", courseId + "", tableObj, table);
                //向服务端发送删除指令
                // });
            } else if (layEvent === 'fabu') {
                var data = {id: courseId}
                if ($(this).text() == '发布') {
                    data.oprea = '发布'
                } else {
                    data.oprea = '取消发布'
                }
                $.ajax({
                    url: '/course/changeState',
                    type: 'get',
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        var currentPage = 1
                        table.reload('Settlement', {
                            url: '/course/showExam',
                            data: {page: currentPage},
                            page: {
                                curr: currentPage
                            }
                        })
                    }
                })
            }
        });

        function editAdd(type, courseId) {
            var title = "编辑";
            if (type == 0) {
                title = "新增考试信息";
            }
            var index = layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '600px'], //宽高
                title: title,
                maxmin: true,
                btn: ['<div style="background:none;border:none;color:#fff" id="lay-submit">确定</div>', '取消'],
                content: '<div class="layui-card"><form class="layui-form" id="ajaxform" action="">' +
                    '<div class="layui-form-item" style="margin-top: 10px;">\n' +
                    ' \n' +
                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">课程</label>\n' +
                    '    <div class="layui-input-inline" style="">\n' +
                    '       <select name="courseId" id="courseId" lay-filter="courseType" lay-verify="required">\n' +
                    '      </select>\n' +
                    '    </div>\n' +
                    '  </div>\n' +

                    '</div>' +


                    '<div class="layui-form-item">\n' +
                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">课程内容</label>\n' +
                    '    <div class="layui-input-inline" style="">\n' +
                    '       <select name="examName" id="examName" lay-filter="examName" lay-verify="required">\n' +
                    '      </select>\n' +
                    '      <input type="hidden" name="examState" value="0" placeholder="" autocomplete="off" class="layui-input">\n' +
                    '    </div>\n' +
                    '  </div>\n' +
                    '</div>' +

                    '<div class="layui-form-item">\n' +
                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">考试类型</label>\n' +
                    '    <div class="layui-input-inline" style="">\n' +
                    '       <select name="type" id="type" lay-filter="type" lay-verify="required">' +
                    '       <option value="0">线上</option>' +
                    '       <option value="1">线下</option>' +
                    '      </select>\n' +

                    '    </div>\n' +
                    '  </div>\n' +
                    '</div>' +
                    '<div class="layui-form-item">\n' +
                    ' \n' +

                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">考试时间 </label>\n' +

                    '<div class="layui-input-inline" style="width: 140px;">\n' +
                    '      <input type="text" id="examTime" name="examTime" style="float:left;"  placeholder="" autocomplete="off" class="layui-input">\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-mid">-</div>\n' +
                    '    <div class="layui-input-inline" style="width: 140px;">\n' +
                    '      <input type="text" id="endTime" name="endTime" style="float:left;"  placeholder="" autocomplete="off" class="layui-input">\n' +
                    '    </div>' +
                    '  </div>\n' +
                    '</div>' +
                    '<div class="layui-form-item">\n' +
                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">参考人员 </label>\n' +
                    '    <div class="layui-input-inline" style="width: 300px;">\n' +
                    '      <textarea  id="electivePerson" name="examUserName"  placeholder=""  class="layui-textarea" autocomplete="off" ></textarea>\n' +
                    '      <input type="hidden"  name="examUserId" placeholder="" autocomplete="off" class="layui-input">\n' +
                    '        <div style="float:right;margin: -29px -72px 0px 0px;color:#1E9FFF"><a href="javascript:;" style="color:#1E9FFF" class="add">添加</a>\n' +
                    '        <a href="javascript:;" style="color:#1E9FFF" class="clear ">清空</a></div>\n' +
                    '    </div>\n' +
                    '  </div>\n' +
                    '</div>\n' +
                    '<div class="layui-form-item">\n' +
                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">考试安排 </label>\n' +
                    '    <div class="layui-input-inline" style="width: 300px;">\n' +
                    '      <textarea  id="plan" name="examArrangement"  placeholder=""  class="layui-textarea" autocomplete="off" ></textarea>\n' +
                    '    </div>\n' +
                    '  </div>\n' +
                    '</div>' +
                    '<div class="layui-form-item">\n' +
                    '  <div class="layui-inline">\n' +
                    '    <label class="layui-form-label">考试地点 </label>\n' +
                    '    <div class="layui-input-inline" style="width: 300px;">\n' +
                    '      <textarea  id="space" name="space"  placeholder=""  class="layui-textarea" autocomplete="off" ></textarea>\n' +
                    '    </div>\n' +
                    '  </div>\n' +
                    '</div>' +
                    '</form></div>',
                success: function (res) {
                    form.render()
                    $.ajax({
                        url: '/equipmentType/selectChildCourseById',
                        type: 'get',
                        data: {id: 0},
                        dataType: 'json',
                        success: function (res) {
                            var str = '<option value="">请选择</option>';
                            for (var i = 0; i < res.data.length; i++) {
                                str += '<option value="' + res.data[i].id + '">' + res.data[i].label + '</option>'
                            }
                            $('#courseId').html(str)
                            form.render('select')
                        }
                    })


                    form.on('select(courseType)', function (data) {
                        if (data.value == 1) {
                            $('.hide').show();
                        } else {
                            $('.hide').hide();
                        }
                        $.ajax({
                            url: '/course/showAllOne',
                            type: 'get',
                            data: {parentId: data.value},
                            dataType: 'json',
                            success: function (res) {
                                var str = '<option value="">请选择</option>';
                                for (var i = 0; i < res.data.length; i++) {
                                    str += '<option value="' + res.data[i].courseName + '">' + res.data[i].courseName + '</option>'
                                }

                                $('#examName').html(str)
                                form.render('select')
                            }
                        })
                    });


                    $(".add").on("click", function () {
                        user_id = "electivePerson";
                        $.popWindow("/common/selectUser");
                    });

                    $('.clear').click(function () {
                        $("#electivePerson").val("");
                        $("#electivePerson").attr('username', '');
                        $("#electivePerson").attr('dataid', '');
                        $("#electivePerson").attr('user_id', '');
                        $("#electivePerson").attr('userprivname', '');
                    });
                    laydate.render({
                        elem: '#examTime'
                        , trigger: 'click'//呼出事件改成click
                        , type: 'datetime'
                        , format: 'yyyy-MM-dd HH:mm:ss'
                    });
                    laydate.render({
                        elem: '#endTime'
                        , trigger: 'click'//呼出事件改成click
                        , type: 'datetime'
                        , format: 'yyyy-MM-dd HH:mm:ss'
                    });


                },
                yes: function (index, layero) {
                    // if($('#courseId').val()==''){
                    //     $.layerMsg({content:'请选择课程分类',icon:2});
                    //     return false;
                    // }
                    // if($('#examName').val()==''){
                    //     $.layerMsg({content:'请选择考试主题',icon:2});
                    //     return false;
                    // }
                    if ($('input[name="examTime"]').val() == '') {
                        $.layerMsg({content: '请选择考试时间', icon: 2});
                        return false;
                    }
                    if ($('input[name="examUserName"]').val() == '') {
                        $.layerMsg({content: '请选择考试人员', icon: 2});
                        return false;
                    }
                    /*
                    if($('input[name="examArrangement"]').val()==''){
                        $.layerMsg({content:'请填入',icon:2});
                        return false;
                    }
                    */
                    $('input[name="examUserId"]').val($('#electivePerson').attr('user_Id'))

                    if (type == 0) {
                        $('#ajaxform').attr('action', '/course/insetExam')
                    }


                    $('#ajaxform').ajaxSubmit({
                        dataType: 'json',
                        success: function (res) {
                            layer.closeAll();
                            var currentPage = 1;
                            table.reload('Settlement', {
                                url: '/course/showExam',
                                data: {page: currentPage},
                                page: {
                                    curr: currentPage
                                }
                            })
                        }
                    })


                },
                btn2: function (index, layero) {

                },
                cancel: function (index, layero) {

                }
            });
        }

        //        删除
        function publicDeletes(url, ids, tableIns, table) {
            layer.confirm('确定要删除吗?', {icon: 3, title: '提示'}, function (index) {
                var data = {
                    id: ids
                }
                var res = toAjaxT(url, data);
                layer.msg(res.msg)
                if (res.code == 0) {
                    try {
                        if (ids.substring(ids.length - 1) == ",") {
                            ids = ids.substring(0, ids.length - 1);
                        }
                        var dataSize = ids.split(",");
                        var dataAll = table.cache[tableIns.config.id];
                        if (dataAll.length == dataSize.length) {
                            //得到当前页
                            var page = $(".layui-laypage-skip .layui-input").val();

                            if (page > 1) {
                                tableIns.reload({
                                        page: {
                                            curr: page - 1 //重新从第 1 页开始
                                        }
                                    }
                                );
                            } else {
                                tableIns = tableIns.reload();
                            }
                        } else {
                            tableIns = tableIns.reload();
                        }
                    } catch (e) {
                        tableIns.reload();
                    }
                }
                layer.close(index);
            });
        }
    });


</script>

</body>


</html>